<template>
<div>
	<content_top title="收入分摊表"></content_top>
	<div class="g_box">
		<div class="g_head">
			<h3>横向表头</h3>
			<div class="g_box_right">
				<ButtonGroup class="g_act_box">
					<Button @click="prev_use('a_xlist')">延用上次设定</Button>
				</ButtonGroup>
				<div class="g_other">
					<a @click="handleClearHTable('a_xlist')">全部清除</a>
				</div>
			</div>
		</div>

		<!-- 部门、规则 -->
		<bumen_item ref="a_xlist"></bumen_item>

	</div>

	<div class="g_box">
		<div class="g_head">
			<h3>纵向表头</h3>
			<div class="g_box_right">
				<ButtonGroup class="g_act_box">
					<Button @click="prev_use('a_ylist')">延用上次设定</Button>
				</ButtonGroup>
				<div class="g_other">
					<a @click="handleClearHTable('a_ylist')">全部清除</a>
				</div>
			</div>
		</div>

		<!-- 部门、科目 -->
		<kemu_item ref="a_ylist"></kemu_item>
		
	</div>
	<!-- 表格 -->
	<div class="g_box">
    
      <div class="g_head">
        <h3>
			数据列表
			<DatePicker :value="filter.date_month" type="month" placeholder="选择月份" style="width: 180px;margin-left: 20px;" @on-change="month_change"></DatePicker>
		</h3>
        <div class="g_box_right">
          <ButtonGroup class="g_act_box">
            <Button @click="export_data">导出表格</Button>
            <Button @click="query">刷新表格</Button>
          </ButtonGroup>
        </div>
      </div>
      <div class="g_box_con">
        <Table :columns="Columns" :data="list"  :border="true" >
			<template slot-scope="{ row, index }" slot="money">
				<input 
					type="text"
					v-model="row.money"
					:readonly="!row.isEdit"
					placeholder="双击输入"
					@dblclick="handleCanEdit(index)"
					@blur="handleInputBlur(index)"
					style="width:100%;padding:5px;text-align:center;border: 0 ;outline: none;"
				/>
			</template>
		</Table>
      </div>
  </div>
</div>
</template>

<script>
import bumen_item from './bumen_item';
import kemu_item from './kemu_item';
import Wcore from '@/libs/common';

export default {
	name: 'share_member_list',
    data () {
		let self = this;
        return {
			filter:{
				date_month:new Date().Format('yyyy-MM'),
			},
			Columns:[],
			list:[],
			inputVals:{},
			
        };
	},
	components:{
		bumen_item,
		kemu_item,
	},
	created(){
		
		
	},
    computed: {
       
    },
	methods:{
		month_change(date){
			this.filter.date_month = date;
		},
		//延用上次
		prev_use(name){
			var data = Wcore.getData(name);
			if(!data){
				return ;
			}
			this.$refs[name].set_data(data);
		},
		handleClearHTable(name) {
			
		},
		query(){
			this.load_data();
		},
		load_data(){

			var self = this;
			
			var xdata = this.$refs['a_xlist'].get_data();
			var ydata = this.$refs['a_ylist'].get_data();
			
			var postdata = {
				xdata:xdata,
				ydata:ydata,
				f:this.filter
			}
			Whttp.load('Accounting/ShareMember/get_data',postdata,function(result){
			
				self.set_Columns(result.xlist);
			
				var list = [{
					name:'收入统计',
					is_edit:1,
					total:0
				},{
					name:ydata.info.name,
					is_edit:1,
					total:ydata.info.exchange_rate
				}];
			
				for(var i=0;i<result.ylist.length;i++){
					list.push(result.ylist[i]);
				}
				
				self.list = list;
				
				self.get_input_total();
				self.get_subject_total();
			});
		},
		set_Columns(list){
			this.Columns = [];
			
			for(var i=0;i<list.length;i++){
				var ls_colnmn = {
					title: list[i].value,
					key: list[i].key,
					align: 'center',
					width: 150,
				};
				if(i>=2){
					ls_colnmn['render'] = this.mrender;
				}
				
				if(list[i].children){
					var childrens = list[i].children;
					var ls_child = [];
					for(var j=0;j<childrens.length;j++){
						ls_child.push({
							title: childrens[j].value,
							key: childrens[j].key,
							align: 'center',
							width: 150,
							render: this.mrender
						});
					}
					ls_colnmn.children = ls_child;
				}
				
				this.Columns.push(ls_colnmn);
			}
			
		},
		query(){
			this.load_data();
		},
		month_change(date){
			this.filter.date_month =  date;
		},
		// 双击输入
		handleCanEdit(index) {
			this.list[index].isEdit = true;
		},
		handleInputBlur(index,val) {
			console.log(val);
			this.list[index].isEdit = false;
		},
		mrender(h, params){
			var self = this;
			if(!params.row.is_edit){
				return h('div',params.row[params.column.key]);
			}
			
			return h('InputNumber',{
				props:{
					value:self.inputVals[params.column.key]?self.inputVals[params.column.key]:0,
					min:0,
					step:0.01
				},
				attrs:{
					placeholder:'输入',
					
				},
				style:{
					textAlign:'center'
				},
				on:{
					'on-change':function(val){

						self.inputVals[params.column.key] = val;
						self.get_input_total();
						self.get_subject_total();
					}
				}
			});
		},
		get_input_total(){
			var total = 0;
			for(var i in this.inputVals){
				total += parseFloat(this.inputVals[i]);
			}
			
			this.list[0].total = total.toFixed(2);
		},
		get_subject_total(){
			var total = 0;
			for(var i in this.inputVals){
				total += parseFloat(this.inputVals[i]);
			}
			
			
			for(var i=0;i<this.list.length;i++){
				if(i==0){
					continue;
				}
				var subject_total = this.list[i].total;
				
				for(var k in this.inputVals){
					
					if(subject_total<=0){
						var ls_val = 0;
					}
					else{
						var ls_val = parseFloat((subject_total/total)*this.inputVals[k]);
					}
					
					this.list[i][k] = this.toFixed(ls_val);
				}
			}
		},
		toFixed(num,pos){
			var pos = pos || 2;
			var ws = 1;
			num = parseFloat(num);
			for(var i=0;i<pos;i++){
				ws *= 10;
			}
			return Math.floor(num * ws) / ws;
		},
		export_data(){
			var self = this;
			
			var xdata = this.$refs['a_xlist'].get_data();
			var ydata = this.$refs['a_ylist'].get_data();
			
			var postdata = {
				xdata:xdata,
				ydata:ydata,
				f:this.filter,
				exps:this.inputVals
			}
			Whttp.load('Accounting/ShareMember/export_data',postdata,function(result){
				window.open(result);
			})
		}
	}
};
</script>
<style scoped>
.price{
	color: red;
    margin: 0 5px;
}
.kemu_list .ivu-col-span-4{
	font-size: 18px;
	margin-bottom:8px;
}
</style>